<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <el-table :data="skuList" border stripe>
      <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
      <el-table-column label="名称" prop="skuName"></el-table-column>
      <el-table-column label="描述" prop="skuDesc"></el-table-column>
      <el-table-column label="默认图片">
        <template v-slot="{ row, $index }">
          <img :src="row.skuDefaultImg" style="width:100px;height:60px">
        </template>
      </el-table-column>
      <el-table-column label="重量(KG)" prop="weight"></el-table-column>
      <el-table-column label="价格(元)" prop="weight"></el-table-column>
      <el-table-column label="操作" width="266" align="center">
        <template v-slot="{ row, $index }">
          <el-button v-if="row.isSale" icon="ele-Top" title="下架" @click="cancelSale(row)" type="success" size="small"></el-button>
          <el-button v-else type="info" icon="ele-Bottom" title="上架"  size="small" @click="onSale(row)"></el-button>
          <el-button type="primary" size="small" icon="ele-Edit" title="修改spu" @click="updateSku(row)"></el-button>
          <el-button type="info" size="small" icon="ele-InfoFilled" title="查看sku列表" @click="showSkuInfo(row)"></el-button>
          <el-button type="danger" size="small" icon="ele-Delete" title="删除" @click="deleteSku(row)"></el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-pagination 
        @current-change="getSkuList" 
        v-model:currentPage="page" 
        v-model:page-size="limit"
        layout="prev, pager, next, jumper" 
        :total="total" />

    <el-drawer v-model="drawer" :with-header="false" size="50%">
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">名称</el-col>
          <el-col :span="16" :offset="0">{{ skuInfo.skuName }}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">描述</el-col>
          <el-col :span="16" :offset="0">{{ skuInfo.skuDesc }}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">价格</el-col>
          <el-col :span="16" :offset="0">{{ skuInfo.price }}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">平台属性</el-col>
          <el-col :span="16" :offset="0">
            <el-tag type="danger" v-for="(attrValue,index) in skuInfo.skuAttrValueList" :key="attrValue.id">
              {{attrValue.valueName}}
            </el-tag>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-for="(saleAttrValue,index) in skuInfo.skuSaleAttrValueList" :key="saleAttrValue.id">
          <el-col :span="6" :offset="0">销售属性</el-col>
          <el-col :span="16" :offset="0">
            <el-tag type="danger" >
              {{ saleAttrValue.saleAttrName }}
            </el-tag>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">商品图片</el-col>
          <el-col :span="16" :offset="0">
            <el-carousel trigger="click" height="400px" v-if="skuInfo.skuImageList.length">
              <el-carousel-item v-for="(skuImg,index) in skuInfo.skuImageList" :key="skuImg.id">
                <img :src="skuImg.imgUrl" alt="">
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </el-row>
    </el-drawer>
  </el-card>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { tryOnUnmounted } from '@vueuse/core';
export default defineComponent({
  name: 'Sku'
})
</script>
<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import { ref, onMounted } from 'vue'
import skuApi, { type SkuData, type SkuInfoData } from '@/api/sku'

const page = ref(1)
const limit = ref(3)
const total = ref(0)
const skuList = ref<SkuInfoData[]>([])
const drawer = ref(false)

const skuInfo = ref<SkuData>({
  spuId: 0,
  price: 0,
  skuName: '',
  skuDesc: '',
  weight: '',
  tmId: 0,
  category3Id: 0,
  skuDefaultImg: '',
  isSale: 0,
  createTime: '',
  skuImageList: [],
  skuAttrValueList: [],
  skuSaleAttrValueList: []
})
onMounted(() => {
  getSkuList()

})

// 根据分页列表获取数据
const getSkuList = async (num = 1) => {
  page.value = num
  const result = await skuApi.getPageList(page.value, limit.value)
  skuList.value = result.records
  total.value = result.total
  console.log(result)
  console.log(skuList.value)
  console.log(total.value)
}


// 删除
const deleteSku = async (row: SkuInfoData) => {
  try {
    await skuApi.deleteSku(row.id as number)
    ElMessage.success('删除成功')
    getSkuList(page.value)
  } catch (error) {
    ElMessage.error('删除失败')
  }

}
// 点击进行上架
const onSale = async (row: SkuInfoData) => {
  try {
    await skuApi.onSale(row.id as number)
    ElMessage.success('上架商品成功')
    getSkuList(page.value)
  } catch (error) {
    ElMessage.error('上架商品失败')
  }

}

// 点击进行下架
const cancelSale = async (row: SkuInfoData) => {
  try {
    await skuApi.cancelSale(row.id as number)
    ElMessage.success('下架商品成功')
    getSkuList(page.value)
  } catch (error) {
    ElMessage.error('下架商品失败')
  }
}

// 点击进行编辑
const updateSku = (row:SkuData)=>{
  ElMessage.info('正在开发中 。。。。。')
}


// 展示抽屉
const showSkuInfo = async (row:SkuData)=>{
  drawer.value = true
  skuInfo.value = {
  spuId: 0,
  price: 0,
  skuName: '',
  skuDesc: '',
  weight: '',
  tmId: 0,
  category3Id: 0,
  skuDefaultImg: '',
  isSale: 0,
  createTime: '',
  skuImageList: [],
  skuAttrValueList: [],
  skuSaleAttrValueList: []
}
  try {
    const result = await skuApi.getById(row.id as number)
    skuInfo.value = result
    console.log(skuInfo.value)
  } catch (error) {
    ElMessage.error('获取sku详情失败')
  }

}
</script>

<style lang="scss" scoped>
  .el-row{
  height: 40px;
  line-height: 40px;
  .el-col-6{
    font-size: 20px;
    font-weight: bold;
    text-align: right;
  }
  .el-col-16{
    // 块级 单行文本不换行 变成三个点
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.el-carousel{
  width: 400px;
  img{
    width: 400px;
    height: 400px;
  }
}

:deep(.el-carousel__indicator){
  button{
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: hotpink;
  }
  &.is-active{
    button{
      background-color: skyblue;
    }
  }
}
</style>
